<template>
  <div>
    <div class="panel">
      <div class="panel-header">商户信息</div>
      <i-form
        class="import-form"
        :inline="true"
        :label-width="200"
        :default-span="12"
        ref="merchantForm"
        :items="merchantFormItems"
        :model="merchantForm"
        :rules="merchantRules"
      >
        <template slot="merchantAddress">
          <el-form-item label="门店所在地" prop="area">
            <HycAddressCascader ref="area" v-model="merchantForm.area" />
          </el-form-item>
        </template>
        <template slot="merchantValidDate">
          <el-form-item
            prop="merchantValidDate"
            label="营业执照有效期"
            required
          >
            <SearchDatePicker
              :start.sync="merchantForm.startTime"
              :end.sync="merchantForm.endTime"
            />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">法人信息</div>
      <i-form
        class="import-form"
        :inline="true"
        :label-width="200"
        :default-span="12"
        ref="corporateForm"
        :items="corporateFormItems"
        :model="corporateForm"
        :rules="corporateRules"
      >
        <template slot="validDate">
          <el-form-item prop="validDate" label="法人证件有效期" required>
            <SearchDatePicker
              :start.sync="corporateForm.startTime"
              :end.sync="corporateForm.endTime"
            />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">结算账户信息</div>
      <i-form
        class="import-form"
        :inline="true"
        :label-width="200"
        :default-span="12"
        ref="accountForm"
        :items="accountFormItems"
        :model="accountForm"
        :rules="accountRules"
      >
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">资料上传</div>
      <i-form
        ref="uploadForm"
        class="import-form"
        :default-span="12"
        :items="uploadFormItems"
        :model="uploadForm"
        :rules="uploadRules"
        :inline="true"
        :label-width="200"
      >
        <template slot="bl_pic">
          <el-form-item label="营业执照图片:" prop="bl_pic" required>
            <hyc-form-upload
              ref="bl_pic"
              v-model="uploadForm.bl_pic"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="boss_positive">
          <el-form-item
            label="法人身份证（正面）:"
            prop="boss_positive"
            required
          >
            <hyc-form-upload
              ref="boss_positive"
              v-model="uploadForm.boss_positive"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="boss_back">
          <el-form-item label="法人身份证（背面）:" prop="boss_back" required>
            <hyc-form-upload
              ref="boss_back"
              v-model="uploadForm.boss_back"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="other_pic1">
          <el-form-item label="其它资料1:" prop="other_pic1" required>
            <hyc-form-upload
              ref="other_pic1"
              v-model="uploadForm.other_pic1"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
      </i-form>
    </div>
  </div>
</template>
<script>
import formValidate from '@/utils/validate'
import SearchDatePicker from '@/components/SearchDatePicker'
import { typeMap } from '@/utils/format'
import HycFormUpload from '@/components/hycFormUpload'
import HycAddressCascader from '@/components/hycAddressCascader'
export default {
  name: 'UserUnionpayAccountInfo',
  components: {
    HycAddressCascader,
    SearchDatePicker,
    HycFormUpload,
  },
  methods: {
    changeItems(target, targetItemValue, attr, attrNewVal) {
      if (!Array.isArray(target)) return

      let index = target.findIndex((item) => item.value === targetItemValue)

      if (index < 0) return

      this.$set(target, index, {
        ...target[index],
        [attr]: attrNewVal,
      })
    },
  },
  watch: {
    'accountForm.account_type': {
      handler(val) {
        if (val === '2') {
          this.changeItems(
            this.accountFormItems,
            'account_boss',
            'hidden',
            false
          )
        } else {
          this.changeItems(
            this.accountFormItems,
            'account_boss',
            'hidden',
            true
          )
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      stationImgData: { fileType: 'IMAGE' },
      merchantFormItems: [
        {
          label: '商户名称',
          required: true,
          type: 'text',
          clearable: true,
          value: 'mct_name',
          placeholder: '须同营业执照名称一致',
          maxlength: 50,
          'show-word-limit': true,
        },
        {
          label: '招牌名',
          required: true,
          type: 'text',
          clearable: true,
          value: 'brand_name',
          maxlength: 50,
          'show-word-limit': true,
        },
        {
          slot: 'merchantAddress',
        },
        {
          label: '地址',
          required: true,
          type: 'text',
          clearable: true,
          value: 'address',
          maxlength: 150,
          'show-word-limit': true,
        },
        {
          label: '联系电话',
          required: true,
          type: 'text',
          clearable: true,
          value: 'tel',
        },
        {
          label: '所属行业',
          required: true,
          type: 'text',
          clearable: true,
          value: '',
        },
        {
          label: '营业执照类型',
          required: true,
          type: 'select',
          clearable: true,
          value: 'bl_type',
          options: [
            {
              label: '三证合一',
              value: '三证合一',
            },
            {
              label: '非三证合一',
              value: '非三证合一',
            },
          ],
        },
        {
          slot: 'merchantValidDate',
        },
        {
          label: '营业执照号',
          required: true,
          type: 'text',
          clearable: true,
          value: 'bl_no',
          maxlength: 30,
          'show-word-limit': true,
        },
      ],
      merchantForm: {
        merchantValidDate: 'default',
      },
      merchantRules: {
        area: [{ required: true }],
        tel: [
          {
            validator: formValidate('validateMobile'),
          },
        ],
        merchantValidDate: [
          {
            validator: (rule, value, callback) => {
              if (
                !this.merchantForm.startTime ||
                this.merchantForm.startTime === '' ||
                !this.merchantForm.endTime ||
                this.merchantForm.endTime === ''
              ) {
                callback(new Error('必须选择开始和结束时间'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      corporateFormItems: [
        {
          label: '法人姓名',
          required: true,
          type: 'text',
          clearable: true,
          value: 'boss_name',
          maxlength: 15,
          'show-word-limit': true,
        },
        {
          label: '法人性别',
          required: true,
          type: 'radio',
          options: [
            {
              label: 'male',
              text: '男',
            },
            {
              label: 'female',
              text: '女',
            },
          ],
          value: 'boss_sex',
        },
        {
          label: '证件国别/地区',
          required: true,
          type: 'select',
          options: typeMap.selectOptions([], 'countryType'),
          clearable: true,
          value: 'boss_id_country',
        },
        {
          label: '证件类型',
          required: true,
          type: 'select',
          options: typeMap.selectOptions([], 'identifyType'),
          clearable: true,
          value: 'boss_id_type',
        },
        {
          label: '法人证件号码',
          required: true,
          type: 'text',
          clearable: true,
          value: 'boss_id_no',
          maxlength: 18,
          'show-word-limit': true,
        },
        {
          slot: 'validDate',
        },
        {
          label: '法人联系电话',
          required: true,
          type: 'text',
          clearable: true,
          value: 'boss_tel',
        },
      ],
      corporateForm: {
        validDate: 'default',
      },
      corporateRules: {
        validDate: [
          {
            validator: (rule, value, callback) => {
              if (
                !this.corporateForm.startTime ||
                this.corporateForm.startTime === '' ||
                !this.corporateForm.endTime ||
                this.corporateForm.endTime === ''
              ) {
                callback(new Error('必须选择开始和结束时间'))
              } else {
                callback()
              }
            },
          },
        ],
        boss_tel: [
          {
            validator: formValidate('validateMobile'),
          },
        ],
      },
      accountFormItems: [
        {
          label: '结算账户类型',
          value: 'account_type',
          clearable: true,
          required: true,
          type: 'radio',
          options: [
            {
              label: '2',
              text: '对私',
            },
            {
              label: '1',
              text: '对公',
            },
          ],
        },
        {
          label: '结算账户人身份',
          value: 'account_boss',
          clearable: true,
          required: true,
          type: 'radio',
          options: [
            {
              label: '法人',
              value: '1',
            },
            {
              label: '法人亲属',
              value: '2',
            },
          ],
        },
        {
          label: '开户行',
          value: 'bank_name',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 25,
          'show-word-limit': true,
        },
        {
          label: '开户名',
          value: 'account_name',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 25,
          'show-word-limit': true,
        },
        {
          label: '账号',
          value: 'account_no',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 30,
          'show-word-limit': true,
        },
      ],
      accountForm: {},
      accountRules: {},
      uploadFormItems: [
        {
          slot: 'bl_pic',
        },
        {
          slot: 'boss_positive',
        },
        {
          slot: 'boss_back',
        },
        {
          slot: 'other_pic1',
        },
      ],
      uploadForm: {},
      uploadRules: {},
    }
  },
}
</script>
<style lang="scss" scoped>
.import-form {
  padding-right: 200px;
}
</style>
